<template>

  <section class="box">
    <header class="header header-box">
      <h2 class="title"><span class="floor-index" v-if="index">{{index}}F</span>{{ titleName }}</h2>

      <span class="actions">
        <slot name="actions"></slot>
      </span>
    </header>

    <div class="content clearfix">
      <slot></slot>
    </div>
  </section>

</template>

<script>
  export default {
    props: {
      titleIcon: {
        type: String
      },

      type: {
        type: String,
        'default': ''
      },

      index: {
        type: Number
      },

      titleName: {
        type: String,
        require: true
      }

    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../../element-variables";
  .box {
    border: 1px solid #dedede;
    background-color: #fff;
    margin-top: 20px;

    .header {
      padding: 20px 20px 15px;
    }

    .floor-index {
      color: $--color-primary;
      padding-right: 10px;
    }

    .title {
      font-size: 18px;
      text-align: left;
    }

    .actions {
      text-align: right;
      color: #9e9e9e;
    }
  }

</style>
